<template>
  <el-checkbox
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
    >Check all</el-checkbox
  >
  <NstdCheckboxGroup
    v-model="checkedCities"
    @change="handleCheckedCitiesChange"
    :options="cities"
  >
  </NstdCheckboxGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref([1, 2])
const cities = [
  {
    type: 'checkbox',
    label: 1,
    value: 'Shanghai'
  },
  {
    type: 'checkbox',
    label: 2,
    value: 'Beijing'
  }
]

const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities.map(item => item.label) : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>
